<template>
  <el-select :disabled="props.disabled !== undefined ? props.disabled : false"
    :clearable="props.clearable !== undefined ? props.clearable : false" v-model="value"
    :multiple="props.multiple !== undefined ? props.multiple : false" v-if="props.options">
    <el-option v-for="option of props.options" :label="option.label" :value="option.value">
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
interface Props {
  modelValue: string | number | undefined | string[] | number[];
  options: {
    label: string;
    value: string | number;
  }[];
  disabled?: boolean | undefined;
  clearable?: boolean | undefined;
  multiple?: boolean | undefined
}
const props = defineProps<Props>();
const emit = defineEmits(["update:modelValue"]);

const value = computed({
  get: () => {
    if (props.multiple) {
      console.log("props.modelValue", props.modelValue, "props.options", props.options)
      if (props.modelValue) {
        if (typeof props.modelValue === "string" && props.modelValue.includes(",")) {
          return props.modelValue.split(",");
        } else if (typeof props.modelValue === "object") {
          return props.modelValue
        } else {
          return props.modelValue && [props.modelValue]
        }
      }
    } else {
      return props.modelValue;

    }
  },
  set: (val) => {
    console.log("value :", val)
    emit("update:modelValue", val);
  },
});

onMounted(() => {
  console.log(
    "modelValue:",
    props.modelValue,
    "type:",
    typeof props.modelValue
  );
});
</script>
